<template>
  <div class="farmerdetail">
      <h4>供货商列表 > 供货商详情</h4>
      <div class="container" style="padding:0;">
            <!-- 基础信息 -->
            <div class="baseInfo">
                 <h4>基础信息</h4>
                 <div class="box">
                      <div class='info box_left'> 
                          
                        <img :src="farmerInfo.avatar" style="width:100px;height:100px;"/>
                      </div>
                      <div class="box_right"> 
                            <!-- <div class="info box_rightt"> -->
                                <div>注册手机：{{farmerInfo.tel}}</div> 
                                <div>注册时间：{{farmerInfo.addTime}}</div>   
                                <div>认证状态：<span :class="{'active':status==0}">{{info}}</span></div> 
                                <div v-if="status!=0">认证申请时间：{{farmerInfo.applyTime}}</div>   
                            <!-- </div> -->
                      </div>
                 </div>
            </div>
            <div v-if="status!=0">
               <!-- 认证信息 -->
               <div class="approve_info">
                   <h4>认证信息<span style="margin-left:10px;" :style="{color:textColor}">({{info}})</span></h4>
                   <div class="info">
                     <div>供货商：{{ farmerInfo.farmName }}</div> 
                     <div>真实姓名：{{farmerInfo.realName}}</div> 
                      <div>身份证号：{{farmerInfo.idCard}}</div>   
                      <div>认证手机：{{farmerInfo.tel}}</div> 
                   </div>
                   <div class="info">
                     <div>产地名称：{{farmerInfo.baseName}}</div> 
                      <div>地区：{{farmerInfo.farmerAddress}}</div>   
                      <div>详细地址：{{farmerInfo.address}}</div>
                      <!-- <div style="color:blue" @click="supplier">修改</div>  -->
                      <el-button type="text" @click="updateFarmerInfo()">修改</el-button>
                   </div>

               </div>
            </div>
             <div v-if="status!=0">
               <!-- 支付信息 -->
                <h4>支付信息<span style="margin-left:10px;" :style="{color:textColor}">({{info}})</span></h4>
                   <div class="info">
                     <div>支付金额：<span style="color:red;">{{ farmerInfo.isPaid == 1 ? '已支付' : '未支付' }}</span></div>
                    </div>
                
            </div>
             <!-- 基础信息 -->
            <div class="baseInfo" v-if="status == 2 " >
                 <h4>认证审核</h4>
                 <div class="info">
                     <div>操作员：{{farmerInfo.operateUser}}</div> 
                      <div>操作时间：{{farmerInfo.operateTime}}</div>   
                 </div>
                 <div class="info" v-if="status == 2">
                     <div><span style="color:red">认证失败原因：</span>{{farmerInfo.statusFail}}</div>  
                 </div>
            </div>
            <!-- 已认证页面的统计信息 -->
            <div class="statistics" v-if="status ==3">
                <h4>统计信息</h4>
                <div class="info">
                    <div>销售量：{{farmerSalesNum}}斤</div> 
                    <div>销售收入：￥{{farmerSalesMoney}}</div> 
                </div> 
                <div class="info">
                    <div>钱包充值：￥{{farmerRechargeMoney}}</div> 
                    <div>钱包余额：￥{{farmerInfo.balance}}</div>
                </div> 
            </div>
            <!-- 所属站点 -->
            <div class="site" >
                <h4>所属站点</h4>
                <div class="info" v-if="siteInfo.id">
                    <div>站点名称：{{ siteInfo.siteName }}</div> 
                </div> 
                <el-button type="primary" style="margin-left: 20px;" v-if="siteInfo.id" @click="allotSite()">修改</el-button>
                <el-button type="primary" style="margin-left: 20px;" v-else @click="allotSite()">点击分配站点</el-button>
            </div>
            <div class="operate"  v-if="farmerInfo.status == '1'">
                <h4>操作</h4>
                <div class="rz_btn" style="padding: 20px;" >
                    <el-button type="info" @click="dialogFormVisible = true">认证失败</el-button> 
                    <el-button type="primary" style="margin-left: 20px;" @click="successA()">认证成功</el-button>
                </div>
            </div>
      
      </div>
      <!-- 认证失败的原因 -->
      <el-dialog title="认证失败原因" :visible.sync="dialogFormVisible" width="30%" top="30vh">
        <el-form :model="form" ref="formReason" :rules="rules">
            <el-form-item  prop="reason">
                 <el-input type="textarea" v-model="form.reason" placeholder="请填写认证失败原因"></el-input> 
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="saveReason('formReason')">确 定</el-button>
        </div>
     </el-dialog>

     <!-- 分配站点的弹框 -->
    <el-dialog title="分配站点"  :visible.sync="siteMask" width="30%" top="30vh">
        <el-form :model="siteForm"  ref="siteForm" :rules="rule2">
            <el-form-item   label="所在地区"  label-width="120px"> 
                 <el-input type="text" v-model="siteForm.area" disabled></el-input> 
            </el-form-item>
            <el-form-item prop="siteName"  label="站点名称"  label-width="120px">
                  <el-select v-model="siteForm.siteName" placeholder="请选择" >
                        <el-option
                        v-for="item in siteSelected"
                        :key="item.value"
                        :label="item.siteName"
                        :value="item.id">
                        </el-option>
                  </el-select>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="siteMask = false">取 消</el-button>
            <el-button type="primary" @click="save('siteForm')">确 定</el-button>
        </div>
     </el-dialog>
     <!-- 点击修改（修改的对话框） -->
     <el-dialog
        title="修改认证信息"
        :visible.sync="dialogVisible"
        width="30%"
        :before-close="handleClose">
        <el-form ref="famerForm" :model="updateFarmerForm" label-width="80px" :rules="rule_detail">
            <el-form-item  label="供货商" prop="farmName">
                <el-input  v-model="updateFarmerForm.farmName" ref="farmName"></el-input>
            </el-form-item>
            <el-form-item label="真实姓名" prop="realName">
                <el-input  v-model="updateFarmerForm.realName"></el-input>
            </el-form-item>
            <el-form-item label="身份证号" prop="idCard">
                <el-input v-model="updateFarmerForm.idCard" ></el-input>
            </el-form-item>
            <el-form-item label="认证手机" prop="tel">
                <el-input v-model="updateFarmerForm.tel"></el-input>
            </el-form-item>
            <el-form-item label="产地名称" prop="baseName">
                <el-input v-model="updateFarmerForm.baseName"></el-input>
            </el-form-item>
            <el-form-item label="地区" prop="selected">
                  <div class="areaBox" style="display:inline-block;padding-top:8px;height:34px;">
                     <area-select :level="2" v-model="updateFarmerForm.selected" :data="$pcaa" :value="updateFarmerForm.selected"></area-select> 
                  </div> 
            </el-form-item>
            <el-form-item label="详细地址" prop="address">
                <el-input  v-model="updateFarmerForm.address"></el-input>
            </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer"> 
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="farmerSure('famerForm')">确 定</el-button>
        </span>
     </el-dialog>
  </div>
</template>

<script>
import { farmerDetail,approveSuccess,approveFail,selectSites,setFarmerSite,farmerUpdata } from '@/request/api'
export default {
    data(){
        var checkBlank = (rule, value, callback) => {
            if (/(^\s+)|(\s+$)|\s+/g.test(value)) {
                callback(new Error('请不要输入空格'));
            }else {
                callback()
            } 
        };
        return {
            status:3,
            info:'',
            textColor:'',
            siteInfo: {}, // 站点信息 
            selectedArr:[],
            dialogTableVisible: false,
            assessorList:[
                { 
                 name:'丽丽1',
                 tel:'15225550038'
                },
                { 
                 name:'丽丽2',
                 tel:'15225550038'
                },
                { 
                 name:'丽丽3',
                 tel:'15225550038'
                }
            ],
            rule_detail:{
                farmName: [
                    { required: true, message: '供货商不能为空', trigger: 'change' },
                     { validator: checkBlank, trigger: 'blur' }
                ],
                realName: [
                     { required: true, message: '真实姓名不能为空', trigger: 'change' },
                     { validator: checkBlank, trigger: 'blur' }
                ],
                idCard: [
                     { required: true, message: '身份证号不能为空', trigger: 'change' },
                     { pattern:/(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/, message: '身份证号格式不对',trigger: 'blur' }
                ],
                tel: [
                    {  required: true, message: '认证手机不能为空', trigger: 'change' },
                    { pattern:/^(0|86|17951)?(13[0-9]|15[012356789]|166|17[3678]|18[0-9]|14[57]|19[89])[0-9]{8}$/, message: '手机号格式不对', trigger: 'blur'}
                  
                ],
                baseName: [
                    {  required: true, message: '产地名称不能为空', trigger: 'change' }
                ],
                selected:[
                    {required:true,message:'地区不能为空',trigger:'change'}
                    
                ],
                address:[
                    {required:true,message:'详细地址不能为空',trigger:'change'}
                    
                ]
           
            },
            siteMask:false,
            siteForm:{
                area:'', // 所在地区 
                siteName:''   // 
            }, // 站点
            siteSelected:[],  // 给供应端分配站点 下拉框选择
            selectAss_arr:[],  
            dialogTableVisible_A:false,
            farmerInfo:{ },  // 基础信息 
            dialogFormVisible:false,
            formLabelWidth:'120px',
            form:{ 
               reason:'' 
            },  // 认证失败原因
            rules: {
                reason: [
                     { required: true, message: '认证失败原因不能为空', trigger: 'blur' },
                     { validator: checkBlank, trigger: 'blur' }
                ]
             },
             rule2: {
                siteName: [
                     { required: true, message: '请选择一项', trigger: 'change' }, 
                ]
             },
             farmerSalesNum:'', // 销量
             farmerSalesMoney:'', // 销售收入
             farmerRechargeMoney:'' ,// 钱包充值
             dialogVisible: false,//点击修改的对话框,
             options:[1,2.3],
             value:1,
             updateFarmerForm:{
                 id:'',
                 farmName:'',
                 realName:'',
                 idCard:'',
                 tel:'',
                 baseName:'',
                 selected:[],
                 address:''
             }, // 修改信息form 表单

          }
          
    },
    created(){
        let status = this.$route.query.status;
        this.status = status;
        if(this.status == 1) {
            this.info = '已申请';
             this.textColor = 'rgb(32, 160, 255)';
        }else if(this.status == 0) {
             this.info = '未认证';
        }else if(this.status == 2) {
             this.info = '未通过';
              this.textColor = 'red';
        }else if(this.status == 3) {
             this.info = '已认证';
        }
        this.get_farmerDetail();
    },
    methods:{
        allotSite(){
        //   开启 分配站点弹框 
           this.siteForm.area = this.farmerInfo.farmerAddress;
           selectSites({
               farmerId:this.$route.params.id
           }).then(res => {
               this.siteSelected = res.data;
               console.log(this.siteSelected);
               if(this.siteSelected.length == 0) {
                    this.$message.info('请先设置站点哦');
                    return false;
               }else {
                   this.siteMask = true;
               }
           })
           console.log(this.siteForm.area);
        },
        selectSite(){
            this.dialogTableVisible = true;
        },
        make_sub(){
            if(this.selectedArr.length ==0) {
                 this.$message({
                    message: '请选择一条数据或者点击取消关闭弹窗',
                    type: 'warning'
                 });
            }else {
                this.dialogTableVisible = false;
            }
        },
        select_arr(selection){
            this.selectedArr = selection;
        },
        change_assessor(){
           this.dialogTableVisible_A = true;
        },
        sub_assessor(){
           if(this.selectAss_arr.length ==0){
                 this.$message({
                    message: '请选择一条数据或者点击取消关闭弹窗',
                    type: 'warning'
                 });
           }else {
               this.dialogTableVisible_A = false; 
           }
        },
        assessorArr(selection){
            this.selectAss_arr = selection;
        },
        get_farmerDetail(){
            farmerDetail({
                id:this.$route.params.id
            }).then(res => {
                console.log(1,res);
                this.farmerInfo = res.farmerInfo;
                this.farmerSalesNum = res.farmerSalesNum;
                this.farmerSalesMoney = res.farmerSalesMoney;
                this.farmerRechargeMoney = res.farmerRechargeMoney;
                if(res.siteInfo) {
                  this.siteInfo = res.siteInfo;
                }
            })
        },
        // 认证成功
        successA(){
            //  console.log(this.siteInfo.siteName);
            //  if( this.siteSelected.length == 0 ) {
            //        this.$message.info('请先设置站点哦');
            //        return false;
            //  }
            //  else {
            //     this.siteMask = true;
            // }
            // if( !this.siteInfo.siteName ) {
            //      this.$message.info('请先设置站点');   
            //      return false;
            // }
            approveSuccess({
                id:this.$route.params.id
            }).then(res => {
                 if(res.code == 1) {
                     this.$message.success('操作成功');   
                     this.$router.go(-1);
                 }
                 if(res.code == 2) {
                     this.$message.info('请先设置站点哦');
                 }
            })
        },
        //  认证失败
        saveReason(formName){
            this.$refs[formName].validate( (valid) => {
                if(valid) {
                    approveFail({
                        id:this.$route.params.id,
                        failReason:this.form.reason
                    }).then(res => {
                          if(res.code == 1) {
                              this.$message.success('操作成功');  
                              this.dialogFormVisible = false;
                              this.form.failReason = '';
                              this.get_farmerDetail();
                              this.$router.go(-1);
                          }
                    })
                }
            })
        },
        save(formName) {
             this.$refs[formName].validate((valid) => {
                  if(valid) {
                    //  给养殖户设置站点 // 根据该地区的id 查找下拉框
                       setFarmerSite({
                          farmerId:this.$route.params.id,
                          siteId:this.siteForm.siteName
                       }).then(res => {
                            if(res.code == 1) {
                                 this.$message.success('分配成功');   
                                 this.siteForm.siteName = '';
                                 this.siteMask =  false;
                                 this.get_farmerDetail();
                            }
                       })  
                  }
             })
        },
        // 点击是否修改
        handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
        },
       //身份证验证
        cart(name){
            // console.log(1,name)
            var regIdNo = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;  
            if(!regIdNo.test(name)){  
                alert('身份证号填写有误');  
                return false;  
            }  
        },
        // 手机号验证
        tel(tel){
            var myreg=/^[1][3,4,5,7,8][0-9]{9}$/;
            if(!myreg.test(tel)){  
                alert('手机号输入有误');  
                return false;  
            }   
        },
        updateFarmerInfo(){
           this.dialogVisible = true;
           this.updateFarmerForm.id=this.$route.params.id
           this.updateFarmerForm.farmName = this.farmerInfo.farmName;
           this.updateFarmerForm.realName = this.farmerInfo.realName;
           this.updateFarmerForm.idCard = this.farmerInfo.idCard;
           this.updateFarmerForm.tel = this.farmerInfo.tel;
           this.updateFarmerForm.baseName = this.farmerInfo.baseName;
        //    地区 赋值 
           this.updateFarmerForm.selected=[this.farmerInfo.provinceId.toString(),this.farmerInfo.cityId.toString(),this.farmerInfo.districtId.toString()];
           this.updateFarmerForm.address = this.farmerInfo.address;

        },
        // farmerSure(){

        // },
        farmerSure(formName){
          this.$refs[formName].validate((valid) => {
          if (valid) {
             this.dialogVisible = !this.dialogVisible
                farmerUpdata({
                    id:this.$route.params.id,
                    realName:this.updateFarmerForm.realName,
                    idCard:this.updateFarmerForm.idCard,
                    tel:this.updateFarmerForm.tel,
                    farmName:this.updateFarmerForm.baseName,      
                    supplyName:this.updateFarmerForm.farmName,
                    address:this.updateFarmerForm.address,
                    provinceId:this.updateFarmerForm.selected[0],
                    cityId:this.updateFarmerForm.selected[1],
                    distinctId:this.updateFarmerForm.selected[2]
                }).then(res=>{
                    if(res.code == 1) {
                            this.$message.success('修改成功');
                            this.get_farmerDetail();
                    }
                    
                })
          } else {
                console.log('error submit!!');
                return false;
          }
        })
      },
        // 确认
        // sure(){
        //    this.dialogVisible = !this.dialogVisible
        //    farmerUpdata({
        //        id:this.$route.params.id,
        //        realName:this.updateFarmerForm.realName,
        //        idCard:this.updateFarmerForm.idCard,
        //        tel:this.updateFarmerForm.tel,
        //        farmName:this.updateFarmerForm.baseName,      
        //        supplyName:this.updateFarmerForm.farmName,
        //        address:this.updateFarmerForm.address,
        //        provinceId:this.updateFarmerForm.selected[0],
        //        cityId:this.updateFarmerForm.selected[1],
        //        distinctId:this.updateFarmerForm.selected[2]
        //    }).then(res=>{
        //        if(res.code == 1) {
        //             this.$message.success('修改成功');
        //             this.get_farmerDetail();
        //        }
               
        //    })
    
        // }
    }
 }
</script>
<style  scoped>
.farmerdetail {
        width:100%;
        height: 100%;
}
.farmerdetail > h4 {
    line-height: 22px;
    border-left: 5px solid rgb(32, 160, 255);
    font-size:16px;
    color: #666;
    padding-left:  10px;
    font-size:18px;
    margin-bottom:20px;
}
.info  .active {
    color:red;
}
.container {
    line-height:50px;
    border-radius: 0;
}
.container h4 {
    background-color: #eee;
    line-height: 50px;
    font-weight: 400;
    font-size:16px;
    padding-left:30px;
    color: #999;

}
.container .info {
    display: flex;
    padding: 0  30px;
    
}
.container .info  div {
    margin-right:100px;
}
.approve_info h4 {
    background-color: #eee;
    line-height: 50px;
    font-weight: 400;
    font-size:16px;
    padding-left:30px;
    color: #999; 
}
.select_site , .audit  {
    border-top:1px solid #eee;
    padding-bottom: 30px;
}
.select_site div {
    font-size:14px;
    color: #333;
    padding-left:30px;
    line-height: 50px;
}
.audit  >div {
    font-size:14px;
    color: #333;
    padding-left:30px;
    line-height: 50px;
}
.box{ 
    overflow: hidden;
}
.box_left{
    width:15%;
    float:left;
}
.box_left>img{
    width:100px;
    height:100px;
    margin:20px auto;
}
.box_right{
    width:85%;
    float: right;
    margin-top:5px;
}
.box_right>div{
    width:50%;
    float:left;
}

</style>